<template>
    <div class="iframe-cont">
        <div class="content">
            <div class="title">{{$route.meta.title}}</div>
            <el-divider></el-divider>
            <!--     筛选区       -->
            <div class="f f-a-c">
                <search-device-class
                    :multiple="false"
                    @select="handleMacType"
                ></search-device-class>
                <el-input class="search-group mar-left-20"
                          style="width: 220px"
                          placeholder="设备编号/主板号"
                          size="small"
                          clearable
                          @keydown.native.enter="handleQuery"
                          v-model="queryParams.keyword">
                    <el-button slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
                </el-input>
                <div class="f-1"></div>
                <el-button style="margin-left: 20px" type="primary" size="small" icon="el-icon-plus" @click="addAndEditDevice()">新增</el-button>

            </div>
            <el-table class="table th-bg"
                      :data="dataList"
                      v-loading="loading"
                      element-loading-text="加载中"
                      element-loading-spinner="el-icon-loading"
            >
                <el-table-column label="序号" prop="name" width="60" fixed>
                    <template slot-scope="scope">
                        <span>{{(queryParams.page - 1) * queryParams.limit + scope.$index + 1}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="设备编号" prop="macCode"></el-table-column>
                <el-table-column label="设备类型" prop="deviceClassName"></el-table-column>
                <el-table-column label="主板型号" prop="macTypeName"></el-table-column>
                <el-table-column label="主板号" prop="deviceName"></el-table-column>
                <el-table-column label="装配时间" prop="addTime" min-width="120"></el-table-column>
                <el-table-column label="入库时间" prop="putTime" min-width="120"></el-table-column>
                <el-table-column label="装配人" prop="staffName"></el-table-column>
                <el-table-column label="操作" width="150px" align="center" fixed="right">
                    <template slot-scope="{row}">
                        <el-button style="color: #3487E8" type="text" @click="addAndEditDevice(row)">编辑</el-button>
                        <el-dropdown>
                            <span class="el-dropdown-link" @click.stop="">
                                更多<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item @click.native="gotoDeviceDetail(row)">查看</el-dropdown-item>
                                <el-dropdown-item @click.native="readyTestDevice(row)">调试</el-dropdown-item>
                                <el-dropdown-item @click.native="readyParamsSet(row)">参数设置</el-dropdown-item>
                                <el-dropdown-item v-if="row.macStatus === 0" @click.native="putInStorage(row)">入库</el-dropdown-item>
                                <el-dropdown-item v-if="row.macStatus !== 0" @click.native="readyAllocate(row)">分配</el-dropdown-item>
                                <el-dropdown-item @click.native="delDevice(row)">删除</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
            <pagination
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.page"
                :limit.sync="queryParams.limit"
                @pagination="getList"
            />
        </div>

        <!--参数设置-->
        <params-set v-if="paramDialog" :visible.sync="paramDialog" :id="macId" @fresh="getList"></params-set>
        <!--加注调试-->
        <el-dialog
            :append-to-body="true"
            title="加注调试"
            :visible.sync="fillDialog"
            width="440px"
            center
        >
            <el-form class="f f-d-c" :model="fillForm" size="mini" label-width="120px" label-position="left">
                <el-form-item class="form-item " label="加注金额（元）:">
                    <el-input class="form-comp-item" type="number" @input="setFillAmount" v-model="fillForm.moneyFill" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item class="form-item " label="加注量（kg/L）:">
                    <el-input class="form-comp-item" type="number" @input="setFillMoney" v-model="fillForm.amountFill" placeholder="请输入"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="fillDialog=false">取 消</el-button>
                <span style="display: inline-block;width: 20px;"></span>
                <el-button type="primary" @click="testDevice">确 定</el-button>
            </div>
        </el-dialog>
        <!--分配运营商-->
        <el-dialog
            :append-to-body="true"
            title="分配运营商"
            :visible.sync="allocationDialog"
            width="840px"
            center
        >
            <el-input class="search-group"
                      style="width: 220px"
                      placeholder="输入关键词搜索"
                      size="small"
                      clearable
                      v-model="operatorQuery.operName"
                      @keydown.native.enter="getOperators"
            >
                <el-button slot="append" icon="el-icon-search" @click="getOperators"></el-button>
            </el-input>
            <el-table class="table th-bg" :data="operators"  v-loading="$store.state.tableLoad"  element-loading-text="加载中" element-loading-spinner="el-icon-loading">
                <el-table-column label="运营商名称" align="center" prop="operName"></el-table-column>
                <el-table-column label="联系人" align="center" prop="contactName"></el-table-column>
                <el-table-column label="手机号" align="center" prop="contactPhone"></el-table-column>
                <el-table-column label="操作"  width="150px" align="center" fixed="right">
                    <template slot-scope="{row}">
                        <el-button style="color: #3487E8" type="text" @click="allocate(row)">分配</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination
                v-show="operatorTotal>0"
                :total="operatorTotal"
                :page.sync="operatorQuery.page"
                :limit.sync="operatorQuery.limit"
                @pagination="getOperators"
            />
            <div slot="footer">
                <el-button @click="allocationDialog=false">关 闭</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import SearchDate from "@/components/SearchCondition/SearchDate";
    import {Message} from "element-ui";
    import SearchMacType from "@/components/SearchCondition/SearchMacType";
    import {getDicts} from "@/api/common";
    import ParamsSet from "@/components/ParamsSet";
    import {abandonDevice, allocateDevice, getDeviceList, getOperators, testDevice} from "@/api/device";
    import SearchDeviceClass from "@/components/SearchCondition/SearchDeviceClass";
    export default {
        name: "index",
        components: {SearchDeviceClass, ParamsSet, SearchMacType, SearchDate},
        data(){
            return{
                dataList: [1],
                loading: false,//加载中
                paramDialog: false,
                fillDialog: false,
                allocationDialog: false,
                keyword:'',
                total: 0,
                queryParams: {
                    limit: this.$tmp.PAGE_SIZES[0],
                    page: 1,
                    saleType: 0, // 0-未售，1-已售
                    macType: null,
                    macStatus: null, // 2-正常,3-故障
                    connectStatus: null, // 0-在线，1-离线
                    keyword: null,
                },
                operatorQuery: {
                    operName: null,
                    limit: this.$tmp.PAGE_SIZES[0],
                    page: 1,
                },
                operators: [],
                operatorTotal: 0,
                fillForm: {
                    id: null,
                    price: null,
                    moneyFill: null,
                    amountFill: null,
                },
                macId: null, // 参数设置的id
            }
        },
        created() {
            this.getList();
        },
        methods:{
            handleRowClick(row) {
                this.gotoDeviceDetail(row)
            },
            putInStorage(row) {
                this.$confirm(`请确认各种参数已配置齐全调试无误！！`, '入库提示', {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true,
                }).then(() => {
                    this.$http({
                        url:'/api/machine/putin',
                        data: { id: row.id },
                    }).then(res=>{
                        Message.success('入库成功！')
                        this.getList()
                    });
                })
            },
            delDevice(row) {
                this.$alert(`确定要删除此设备吗`,'提示', { showCancelButton:true }).then(res => {
                    this.$http({
                        url:'/api/machine/delete',
                        data: { id: row.id },
                    }).then(res=>{
                        Message.success('删除成功！')
                        this.getList()
                    });
                })
            },
            handleMacType(e) {
                this.queryParams.deviceClass = e.ids
                this.handleQuery()
            },
            handleQuery() {
                this.queryParams.page = 1
                this.getList()
            },
            readyTestDevice(row) {
                console.log(row)
                if((!row.units && row.units!==0) || (!row.ureaPrice && !row.ureaPrice!==0)) {
                    this.$confirm(`请先设置机器参数`, '提示', {
                        confirmButtonText: '确 认',
                        showCancelButton: false,
                        type: 'warning',
                        center: true,
                    }).then(() => {

                    })
                } else {
                    this.fillDialog = true
                    this.fillForm.id = row.id
                    this.fillForm.price = row.ureaPrice
                }
            },
            testDevice() {
                this.fillForm.moneyFill = Number(this.fillForm.moneyFill).toFixed(2)
                  testDevice(this.fillForm).then(res => {
                      Message.success('加注命令发送成功！')
                      this.fillDialog = false
                      this.fillForm.moneyFill = 0
                      this.fillForm.amountFill = 0
                  })
            },
            readyParamsSet(row) {
                this.macId = row.id
                this.paramDialog = true
            },
            readyAllocate(row) {
                this.allocationDialog = true
                this.macId = row.id
                this.getOperators()
            },
            allocate(row) {
                this.$confirm(`<span>确定当前设备重新分配至<span style="color: red;">${row.operName}</span>运营商</span>`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true,
                    dangerouslyUseHTMLString: true,
                }).then(() => {
                    allocateDevice({id: this.macId, operatorId: row.id}).then(res=>{
                        this.$message({
                            type: 'success',
                            message: '分配成功!'
                        });
                        this.allocationDialog = false
                        this.getList()
                    });
                })
            },
            gotoDeviceDetail(row) {
                this.$router.push('/device/unsold/detail?id='+(row.id || ''))
            },
            addAndEditDevice(row='') {
                this.$router.push({ path: '/device/unsold/addDevice', query: { id:row.id || '' }})
            },
            //获取数据
            getList() {
                this.loading = true;
                getDeviceList(this.queryParams).then(res=>{
                    this.dataList = res.data;
                    this.total = res.count;
                }).finally(() => {
                    this.loading = false
                })
            },
            //获取运营商数据
            getOperators(){
                getOperators(this.operatorQuery).then(res=>{
                    this.operators = res.data;
                    this.operatorTotal = res.count;
                });
            },
            setFillAmount(val) {
                this.fillForm.amountFill = (val /this.fillForm.price).toFixed(2)
            },
            setFillMoney(val) {
                console.log(val)
                this.fillForm.moneyFill = (val * this.fillForm.price).toFixed(2)
            }
        }
    }
</script>

<style lang="scss" scoped>
::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
::v-deep input[type="number"]{
    -moz-appearance: textfield;
}
::v-deep .el-form-item__content {
    margin-left: 10px;
}
.form-item {
    width: 400px;
}
.form-comp-item {
    width: 240px;
}
.table {
    margin-top: 20px;
}
</style>
